<template>
  <div class="info">
    <div id="infobody">
      <div id="info_nav">
        <span id="info_li">我的信息</span>
      </div>
      <table id="infobody_tab">
        <tr>
          <td colspan="2" id="myheadpic" style="text-align:center;position:relative">
            <div id="headtitle">
              <img :src="getuserpic(user.headpic)" @click="changeHeadPic" />
            </div>
          </td>
        </tr>
        <tr>
          <td>用户昵称：</td>
          <td>
            <el-input v-model="user.userName" class="input"></el-input>
            <!-- <input type="text" v-model="user.userName" /> -->
          </td>
        </tr>
        <!-- <tr>
          <td>性别：</td>
          <td>
            <button class="btn btn-sm btn-primary">女</button>
            <button class="btn btn-sm btn-dafault">男</button>
            <button class="btn btn-sm btn-dafault">保密</button>
          </td>
        </tr>-->
        <!-- <tr>
          <td>出生年月：</td>
          <td>
            <input type="text" placeholder="选择日期" />
          </td>
        </tr>-->
        <tr>
          <td>手机号：</td>
          <td>
            <el-input v-model="user.userTel" class="input"></el-input>
          </td>
        </tr>
        <tr>
          <td>电子邮箱：</td>
          <td>
            <el-input v-model="user.mail" class="input"></el-input>
          </td>
        </tr>
        <tr>
          <td colspan="2" style="padding-right:10px">
            <el-button @click="save" type="primary" style="text-align:center" class="button">保存</el-button>
          </td>
        </tr>
      </table>

      <!-- 认证 -->
      <!-- <div id="infobody_rz">
        <div id="shiming">
          <div id="round"></div>
          <div id="shiming_text">
            <span>实名认证</span>
            <span>已验证</span>
          </div>
        </div>
        <div id="shiming">
          <div id="round"></div>
          <div id="shiming_text">
            <span>驾照认证</span>
            <span>已验证</span>
          </div>
        </div>
        <div id="shiming">
          <div id="round"></div>
          <div id="shiming_text">
            <span>学生认证</span>
            <span>已验证</span>
          </div>
        </div>
      </div>-->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      currentUser: {}
    };
  },
  created() {
    this.$axios
      .post("http://localhost:3000/personal/ShowUser")
      .then(res => {
        this.user = res.data.data[0];
      })
      .catch(err => {
        console.log("错误信息：", err);
      });
  },
  methods: {
    changeHeadPic() {
      this.$router.push({
        name: "UpdHeadPic"
      });
    },
    getuserpic(headpic) {
      let path = "http://localhost:3000/upload/" + headpic;
      return path;
    },
    //修改用户信息
    save() {
      this.$axios
        .put("http://localhost:3000/personal/UpdInfo", {
          userName: this.user.userName
        })
        .then(res => {
          console.log(res.data.data);
          alert("信息修改成功");
        })
        .catch(err => {
          console.log("错误信息：", err);
        });
    }
  }
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}

.info {
  flex: 2;
}

ul {
  list-style: none;
}

input {
  border: none;
}
.input {
  padding-top: 20px;
  margin-left: -16px;
}
.button {
  width: 300px;
}
#infobody {
  background-color: #fff;
  height: 500px;
}

#info_nav {
  width: 100px;
  /* height: 50px; */
  border-left: 2px solid gray;
  text-align: center;
  margin: 10px;
}

#info_nav span {
  font-weight: 600;
  display: block;
  font-size: 15px;
}

#infobody_tab tr > :first-child {
  text-align: right;
  padding: 0 30px 0 0;
}
#infobody_tab > tr > td {
  padding-bottom: 20px;
}

#infobody_tab td {
  height: 40px;
  /* border: 1px solid #000; */
}

#headtitle > img {
  width: 100%;
  height: 100%;
}

#headtitle {
  border-radius: 50%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.3);
  width: 130px;
  height: 130px;
  text-align: center;
  margin: 0 auto;
}

#infobody_rz {
  margin: 50px;
  margin-left: 100px;
  display: flex;
}

#infobody_rz > div {
  flex: 1;
}

#shiming {
  display: flex;
  width: 130px;
}

#round {
  width: 64px;
  height: 64px;
  background-color: black;
  border-radius: 50%;
  cursor: pointer;
}

#shiming_text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#shiming_text span {
  flex: 1;
  margin-left: 10px;
  height: 35px;
  line-height: 35px;
}
</style>